/** @format */

import { Flex, List, Image, Button } from "antd";
import React, { memo } from "react";
import title_img from "../../assets/img/logo.png";
import styles from "./index.module.less";

const LearningPath = () => {
  const [listData, setListData] = React.useState(["1111", "2222", "3333"]);
  return (
    // 整个框架
    <Flex vertical>
      {/* 上方内容 */}
      <Flex className={styles.top_div}>
        <List
          className={styles.left_div}
          dataSource={listData}
          renderItem={(item) => (
            <List.Item>
              <ListItem item={item} />
            </List.Item>
          )}
        />

        <Flex className={styles.right_div} vertical>
          <div>top</div>
          <div>bottom</div>
        </Flex>
      </Flex>

      {/* 下方文本 */}
      <div className={styles.bottom_div}>
        ©2020 · wanandroid.com · All Rights Reserved. 皖ICP备17022096号 关于我们
      </div>
    </Flex>
  );
};

export default LearningPath;

const ListItem = memo((props: any) => {
  const { item } = props;

  const onClick = () => {
    console.log("item click", item);
  };

  return (
    <Flex className={styles.list_item_res}>
      <Image
        className={styles.list_item_img}
        src={title_img}
        onClick={onClick}
      />

      <Flex className={styles.list_item_content}>
        <Flex className={styles.list_content_left} vertical>
          <div className={styles.list_item_title} onClick={onClick}>
            title
          </div>
          <div>content</div>
        </Flex>
        <div className={styles.list_content_right}>
          <Button className={styles.list_content__button}>关注</Button>
          <div>关注人数</div>
        </div>
      </Flex>
    </Flex>
  );
});
